<template>
	<view class="headerTopBox" :style="{height:topheight+'rpx'}">
		<view class="header_top">
			<view :style="{height:height+'rpx','background-color':bgcolor}" class="statusheight"></view>
			<view class="header_center" :style="{'background-color':bgcolor}">
				<view class="left" @click="back" v-if="!isback">
					<i class="iconfont todayfanhui " :class="bgcolor?'iconsize':''"></i>
				</view>
				<view class="left" @click="back" v-else>
					<slot name='quit'></slot>
				</view>
				<view :class="['center',customClass]">
					<text class="title" :style="{'color':bgcolor?'#FFFFFF':'#333333'}">{{title}}</text>
				</view>
				<view class="myright">
					<block v-if="isline">
						<view class="right_btn">
							<slot name='save'></slot>
						</view>
					</block>
					<block v-else>
						<view class="right_btn" @click="sumbit">
							<text class="iconsize" :style="{'color':bgcolor?'#FFFFFF':'#333333'}">{{rightval}}</text>
						</view>
						<view class="right" v-if="imgsrc" @click="search">
							<image :src="imgsrc" mode="widthFix"></image>
						</view>
					</block>
				</view>
			</view>
		</view>
	</view>
</template>
<!-- 
	bgcolor :设置头部背景色
	isback  :是否自定义返回插槽   	   插槽1 slot =quit
	title   :头部显示的文字
	rightval:右边默认显示文字
	isline :是否自定义右边插槽显示   插槽2  slot  = save
	customClass: 设置顶部文字的排列方式 参数为
		center_l  左居中
		center_r 有居中
		center_c 居中
	imgsrc:为右边icon  的图片地址
	@search 点击右边icon的事件回调
	@back   自定义返回事件
	@submit 右边文字点击事件
 
 -->
<script>
	import {
		mapGetters,
	} from 'vuex';
	export default {
		data() {
			return {
				//imgsrc:'../../../static/icon/search-icon.png'
				height: '',
				topheight: ''
			}
		},
		computed: {
			...mapGetters({
				'statuheight': 'statuheight',
			})
		},
		created() {
			let sheight = this.statuheight
			console.log('电池栏高度123', this.statuheight);

			if (!sheight) {
				this.height = 40;
				this.topheight = this.statuheight + 128;
			} else {
				this.topheight = this.statuheight + 88;
				this.height = sheight;
			}
		},
		methods: {
			back() {
				if (this.isback) {
					this.$emit('back');
				} else {
					uni.navigateBack({
						delta: 1,
						animationType: 'pop-out',
						animationDuration: 200
					})
				}
			},
			sumbit() {
				this.$emit('submit')
			},
			search() {
				this.$emit('search')
			}
		},
		watch: {
			imgsrc(val) {
				this.imgsrc = val
			}
		},
		props: {
			bgcolor: {
				type: String,
				default: () => {
					return ''
				}
			},
			isback: {
				type: Boolean,
				default: false
			},
			title: {
				type: String,
				default: () => {
					return ''
				}
			},
			rightval: {
				type: String,
				default: () => {
					return '完成'
				}
			},
			customClass: {
				type: String,
				default: () => {
					return 'center_c'
				}
			},
			isline: {
				type: Boolean,
				default: () => {
					return false
				}
			},
			imgsrc: {
				type: String,
				default: () => {
					return ''
				}
			}
		}

	}
</script>

<style lang="scss" scoped>
	.m_header_top {
		// height: 134rpx;
	}

	.header_top {
		position: fixed;
		z-index: 99;
		background-color: $today-bg-color;
		color: $today-add-textColor;
		top: 0;
		width: 100%;

		.statusheight {
			width: 100%;
			// // min-height:35rpx;
			// height: var(--status-bar-height);
			// // background-color: #fff;
		}

		.myright {
			min-width: 48rpx;
			width: auto;

			.right_btn {
				// width:200rpx;
				padding-right: 16rpx;
				font-size: 32rpx;
			}
		}

		.header_center {
			background-color: $today-bg-color;
			position: relative;
			z-index: 66;
			display: flex;
			justify-content: space-between;
			height: 88rpx;
			align-items: center;
			// border: 1rpx solid red;
			padding: 0 16rpx;
			box-sizing: border-box;
			.left {
				width: 48rpx;
				height: 48rpx;
				text-align: center;
				line-height: 48rpx;
				// background:rgba(68,68,68,1);
			}

			.iconsize {
				font-size: 34rpx;
				color: $today-add-successColor!important;
			}

			.center {
				flex: 2;
				display: flex;
				position: absolute;
				left: 50%;
				transform: translateX(-50%);

				.title {
					font-size: 34rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: $today-add-textColor!important;
					opacity: 1;
				}

			}

			.center_l {
				justify-content: flex-start;
				margin-left: 16rpx;
				font-size: 34rpx;
				color: #FFFFFF;
			}

			.center_r {
				justify-content: flex-end;
				margin-right: 16rpx;
				font-size: 34rpx;
				color: #FFFFFF;
			}

			.center_c {
				justify-content: center;
				font-size: 34rpx;
				color: #FFFFFF;
			}

			.right {
				width: 48rpx;
				height: 48rpx;
				// background:rgba(68,68,68,1);
			}

			image {
				width: 48rpx;
				height: 48rpx;
			}
		}
	}
</style>
